import React, {
  Component
} from 'react';
import GridTable from '../../components/display/gridTable';
import {
  Button,
  Input,
  Select,
  Row,
  Col,
  Tooltip,
  Divider,
  Modal
} from 'antd';
import {
  findPrivateStubList
} from '../../fetch/fetchApi';
import PropsType from "prop-types";
import SubscribeOrder from './subscribeOrder'
const Option = Select.Option;

class Personpile extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      gridData: [],
      loadingmes: '查询',
      loading: !1,
      btnloading: !1
    };
    this.init();
    window.LayoutTab.tabParam && setTimeout(() => {
      this.queryChargeInfo();
    });
  }

  init() {
    this.query = {};
    this.params = {};
    window.LayoutTab && (this.query['account'] = window.LayoutTab.tabParam.account);
    // 设置表头
    this.tableColumns = [{
      title: '电桩编号',
      dataIndex: 'stubId',
      key: 'stubId',
      fixed: 'left',
      width: 100,
    }, {
      title: '电桩名称',
      dataIndex: 'stubName',
      key: 'stubName',
    }, {
      title: '桩主',
      dataIndex: 'account',
      key: 'account',
    }, {
      title: '当前状态',
      dataIndex: 'stubStatusName',
      key: 'stubStatusName',
    }, {
      title: '分享状态',
      dataIndex: 'isShare',
      key: 'isShare',
      className: 'column-nowrap',
      render: (text, record) => (
        <div>{text?'已分享':'未分享'}</div>
      )
    }, {
      title: '电费',
      dataIndex: 'totalFeeInfo',
      key: 'totalFeeInfo',
      className: 'column-nowrap',
      render: (text, record) => (
        <Tooltip placement="topLeft" title={text && text.replace(/#/g, '\n')} >
            {text}
          </Tooltip>)

    }, {
      title: '城市',
      dataIndex: 'cityName',
      key: 'cityName'
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address'
    }, {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 100,
      render: (text, record) => (
        <div className="action-wrap">
              <a href="javascript:void(0);" onClick={() => this.openTab({'keyId': record.stubId, 'stubId': record.stubId}, {'key': 'orderlist', titleText: '订单列表'})}>订单列表</a>
              <Divider type="vertical" />
              <a href="javascript:void(0);" onClick={() => this.showSubscribeOrderModal({
                stubId:record.stubId
              })}>预约订单</a>
            </div>
      )
    }];
  }

  showSubscribeOrderModal = (params = {}) => {
    this.setState({
      subOrderModalVisible: true,
      subOrderParams: params
    })
  }

  handleSubOrderModalCancel = () => {
    this.setState({
      subOrderModalVisible: false
    })
  }

  // fetch DataSource
  async findPrivateStubList() {
    this.setState({
      loading: !0,
      btnloading: !0
    });
    try {
      const resData = await findPrivateStubList(this.query);
      let resObj = resData.data.data;
      if (resData.data.code === '200') {
        for (let r of resObj) {
          //r['isShare'] = r['isShare'] === 0 ? '未分享': '已分享';
          r['totalFeeInfo'] = r['totalFeeInfo'] ? r['totalFeeInfo'] : '---';
          r['address'] = r['address'] ? r['address'] : '---';
          r['cityName'] = r['cityName'] ? r['cityName'] : '---';
        }
        return resObj;
      }
    } catch (e) {
      console.log(e);
    }
  }

  // 提交查询
  queryChargeInfo() {
    this.findPrivateStubList().then((data) => {
      this.setState({
        loading: !1,
        btnloading: !1,
        gridData: data
      });
    });
  }

  // 注入电桩编号
  pileCodeInputHandler(e) {
    this.query['stubId'] = e.target.value.toString();
  }

  // 注入桩主账号
  pilerAccountInputHandler(e) {
    this.query['account'] = e.target.value.toString();
  }

  // 打开tab
  openTab(param, e) {
    this.props.onAdd.bind(window.LayoutTab)(e, param);
  }

  render() {
    const Content = <div className="sc-page-content">
      <div className="page-toolbar">
        <Row gutter={8}>
          <Col lg={8} xl={4}>
            <Input placeholder="电桩编号精确查询" onChange={this.pileCodeInputHandler.bind(this)}/>
          </Col>
          <Col lg={8} xl={4}>
            <Input placeholder="桩主账号精确查询" onChange={this.pilerAccountInputHandler.bind(this)}/>
          </Col>
          <div className={'button-inlineBlock'}>
            <Button type="primary" onClick={this.queryChargeInfo.bind(this)}>{this.state.loadingmes}</Button>
          </div>
        </Row>
      </div>
      <div className="page-panel">
        <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
      </div>

      <Modal width="800px" title="预约订单列表" visible={this.state.subOrderModalVisible} footer={null} onCancel={this.handleSubOrderModalCancel}>
        <SubscribeOrder params={this.state.subOrderParams}/>
      </Modal>
    </div>;

    return Content;
  }
}

export default Personpile;

Personpile.propTypes = {
  onAdd: PropsType.func
}